<template>
  <div id="app" v-cloak>
    <router-view />
    <call v-if="user.gridPersonType === '5'"></call>
    <trtc-calling v-else></trtc-calling>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Public from '@/api/public'
import mapPlugin from '@/libs/mapPlugin'
import TrtcCalling from '@/components/Global/TrtcCalling'
import call from '@/components/Global/TrtcCalling/Call'
export default {
  name: 'App',
  components: { TrtcCalling, call },
  data() {
    return {
      webSocket: null,
      vshow: false,
      timer: null
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo,
      isTimeOut: state => state.timeOut,
      isHttpErro: state => state.httpErro
    })
  },
  watch: {
    isHttpErro(newVal) {
      if (newVal) {
        this.$toast({
          message: '接口请求失败，请联系管理员',
          position: 'bottom'
        })
        this.$store.commit('setHttpErro', false)
      }
    },
    isTimeOut(newVal) {
      if (newVal) {
        if (this.user.WeChatCode) {
          this.$store.commit('setUserInfo', {})
          this.$store.commit('setTimeOut', false)
          this.$router.push('/auth-login')
        } else {
          this.$dialog
            .alert({
              title: '提示',
              message: '登录超时，请重新登录'
            })
            .then(() => {
              this.$store.commit('setUserInfo', {})
              this.$store.commit('setTimeOut', false)
              this.$router.push('/login')
            })
        }
      }
    }
  },
  mounted() {},
  created() {
    const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
    if (isiOS) {
      // 在页面刷新时将vuex里的信息保存到缓存里
      window.addEventListener('pagehide', () => {
        localStorage.setItem('store', JSON.stringify(this.$store.state))
      })
      // 在页面加载时读取localStorage里的状态信息
      localStorage.getItem('store') &&
        this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('store'))))
    } else {
      // 在页面刷新时将vuex里的信息保存到缓存里
      window.addEventListener('beforeunload', () => {
        localStorage.setItem('store', JSON.stringify(this.$store.state))
      })
      // 在页面加载时读取localStorage里的状态信息
      localStorage.getItem('store') &&
        this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('store'))))
    }
    // 在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener('beforeunload', () => {
      localStorage.setItem('store', JSON.stringify(this.$store.state))
    })
    // 在页面加载时读取localStorage里的状态信息
    if (localStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem('store'))))
    }
    // this.getUserLngLat()
    // 实时定位
    this.timer = setInterval(() => {
      this.sendLocation()
    }, 1000 * 60 * 10)
  },
  methods: {
    // 建立通信
    getUserLngLat() {
      if (!this.user.token) return false
      this.webSocket = new WebSocket(`${this.$config.webSocketURl}grid_location/${this.user.token}`)
      this.webSocket.onmessage = () => {
        console.log('接收成功')
        this.sendLocation()
      }
      this.webSocket.onerror = () => {
        this.webSocket && this.webSocket.close()
      }
    },
    // 获取用户位置并发送
    // sendLocation() {
    //   mapPlugin.geolocation(result => {
    //     const lngLat = result.position
    //     Public.User.sendLocation({
    //       longitude: lngLat.lng,
    //       latitude: lngLat.lat
    //     })
    //   })
    // }
    // 获取用户位置并发送
    sendLocation() {
      if (this.user && this.user.appCode) {
        mapPlugin.geolocation(result => {
          const lngLat = result.position
          Public.User.positioningLocation({
            longitude: lngLat.lng,
            latitude: lngLat.lat,
            appCode: this.user.appCode,
            gridCode: this.user.gridCode,
            regionCode: this.user.regionCode,
            phone: this.user.phone,
            gridPersonType: this.user.gridPersonType,
            gridName: this.user.gridName,
            gridPersonCode: this.user.gridPersonCode,
            gridPersonName: this.user.gridPersonName
          }).then(res => {
            console.log(res)
          })
        }, true)
      }
    }
  },
  beforeDestroy() {
    this.webSocket && this.webSocket.close()
    clearInterval(this.timer)
  }
}
</script>

<style lang="less">
[v-cloak] {
  display: none;
}
</style>
